<template>
    <a-tree
            v-model="checkedKeys"
            :checkable="true"
            :expanded-keys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :selected-keys="selectedKeys"
            :tree-data="treeData"
            :replaceFields="replaceFields"
            @expand="onExpand"
            @select="onSelect"
    />
</template>

<script>
import {frame_routes} from "@/config/router";
import {getMenus} from "@/utils/storageUtil";
export default {
    name: "MenuTree",
    props:{
        defaultChecked:{
            type: Array,
            default: []
        }
    },
    data() {
        return {
            expandedKeys: [],
            autoExpandParent: false,
            checkedKeys: [],
            selectedKeys: [],
            treeData:[],
            replaceFields: {children:'children', title:'title', key:'name' }
        };
    },
    watch: {
        checkedKeys(val) {
            console.log('onCheck', val);
        },
    },
    methods: {
        onExpand(expandedKeys) {
            console.log('onExpand', expandedKeys);
            // if not set autoExpandParent to false, if children expanded, parent can not collapse.
            // or, you can remove all expanded children keys.
            this.expandedKeys = expandedKeys;
            this.autoExpandParent = false;
        },
        onCheck(checkedKeys) {
            console.log('onCheck', checkedKeys);
            this.checkedKeys = checkedKeys;
        },
        onSelect(selectedKeys, info) {
            console.log('onSelect', info);
            this.selectedKeys = selectedKeys;
        },
    },
    created() {
      this.treeData = frame_routes[0].children.filter(item => {return item.hidden !== true});
      console.log(frame_routes[0].children)
      console.log(frame_routes[0].children.filter(item => {return item.hidden !== true}))
      this.checkedKeys = [...this.defaultChecked];
    }
}
</script>

<style scoped>

</style>
